<template>
  <div :class="['page', musicIndex !== -1 && 'play_bottom']">
    <div class="user_info flex_a_c">
      <img class="avatar" :src="userInfo.avatar || 'https://zsjl.oss-cn-beijing.aliyuncs.com/xiaochengxu/uploadDynamic/png/v1jhdleo836oid6dks7kbk7f.png?x-oss-process=image/resize,m_fixed,h_216,w_384'" alt="">
      <div class="flex1">
        <p class="nick_name">{{ userInfo.user_name }}</p>
        <p>已创作5首音乐</p>
      </div>
    </div>
    <div class="title mb-10">创作列表</div>
    <div class="pl-16 pr-16">
      <van-empty
        v-if="!list.length && total === 0"
        class="mt-40"
        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
        image-size="80"
        description="您还没有创作歌曲"
      />
      <van-pull-refresh v-else v-model="refreshing" @refresh="onRefresh">
          <!-- v-if="!list.length" -->
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          class="pt-24"
        >
          <div v-if="total" class="music_list" v-for="(item, idx) in list" :key="item">
            <div class="info flex_r">
              <div class="cover" >
                <template v-if="item.song_status === 2">
                  <img @click="onPause" v-if="musicIndex === idx && isPlay" class="audio_btn" src="../../assets/img/music/pause_icon.png" alt="">
                  <img @click="onPlay(idx)" v-else class="audio_btn" src="../../assets/img/music/play_icon.png" alt="">
                </template>
                <p v-else class="loading_txt">生成中...</p>
                <img class="cover_img" src="https://zsjl.oss-cn-beijing.aliyuncs.com/workFile/image/png/lcjlfvcapj80jlxvrqi0qfwt.png?x-oss-process=image/resize,m_fixed,h_216,w_384" alt="">
              </div>
              <div class="pt-17">
                <div class="music_name">{{ item.song_name }}</div>
                <p>{{ item.song_lyrics.slice(0, 10) }}</p>
              </div>
            </div>
            <div class="opt flex_a_c flex_between">
              <div class="flex_a_c">
                <img class="opt_icon" src="../../assets/img/music/play_count.png" alt="">
                <p class="w_57 pl-5">{{ item.play_count }}</p>
                <img class="opt_icon mr-5" src="../../assets/img/music/give_like_icon.png" alt="">
                {{ item.like_count }}
              </div>
              <div class="flex_a_c">
                <img class="opt_icon mr-4" src="../../assets/img/music/share_icon.png" alt="">
                以歌之名送给好友
              </div>
            </div>
          </div>
          <!-- <div class="lh-30" v-for="item in list" :key="item" :title="item">{{ item }}</div> -->
        </van-list>
      </van-pull-refresh>
    </div>
    <tabBar />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import tabBar from '@/components/tabBar'
import { useMusicStore, useStore } from '@/store/index';
import { storeToRefs } from "pinia";
import { getUserSongList } from '@/api'
const store = useMusicStore();
const userStore = useStore();
const { musicIndex, musicList, isPlay } = storeToRefs(store)
let { userInfo } = storeToRefs(userStore)
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const total = ref('')

let onPlay = idx => {
  if (musicIndex.value === idx) {
    store.setChangePlayStatus()
    return false
  }
  store.setMusicIndex(idx)
}
let onPause = () => {
  store.setChangePlayStatus()
}
const onLoad = () => {
  fnGetMusicList()
};
async function fnGetMusicList() {
  const { code, data } = await getUserSongList()
  if (code === 200) {
    list.value = list.value.concat(data.song_list);
    store.setMusicList(list.value)
    total.value = 1
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }
    // list.value = list.value.concat(data.song_list);
    // store.setMusicList(list.value)
    
    loading.value = false;

    if (list.value.length >= total.value) {
      finished.value = true;
    }
  }
}
const onRefresh = () => {
  // 清空列表数据
  finished.value = false;
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad(); 
};
</script>
<style scoped lang="scss" src="./card.scss"></style>
<style lang="scss" scoped>
.user_info {
  padding-left: 16px;
  padding-top: 16px;
  font-size: 14px;
  color: rgba(255,255,255,0.4);
  line-height: 18px;
  margin-bottom: 24px;
  .avatar {
    width: 80px;
    height: 80px;
    margin-right: 16px;
    border-radius: 100%;
    display: block;
    object-fit: cover;
  }
  .nick_name {
    font-size: 24px;
    color: #FFFFFF;
    line-height: 38px;
    font-weight: 600;
  }
}

.title {
  font-weight: 600;
  font-size: 24px;
  color: #FFFFFF;
  line-height: 34px;
  padding-left: 16px;
}


</style>